<template>
	<view class="select-device-layout">
		<z-paging ref="pagingRef" refresher-only @query="queryList">
			<template #top>
				<!-- 分类 -->
				<view class="menu-box">
					<uv-tabs :list="menuList" :activeStyle="{color:'#5F56EF',fontSize:'32rpx'}" :inactiveStyle="{color:'#666666',fontSize:'32rpx'}" :itemStyle="{height:'80rpx',padding:'0 60rpx'}" lineColor="#5F56EF" @click="didSelectMenuItem"></uv-tabs>
				</view>
				<!-- 显示选择的机具数量 -->
				<view class="select-device-header">
					<text>选择机具</text>
					<text>已选择{{selectedCount}}台</text>
				</view>
				<!-- 批量划拨编号筛选 -->
				<view class="select-device-filter" v-if="selectType == 1">
					<xh-input placeholder="请输入" showTitle title="开始编号" v-model="formParams.startCode" @onBlur="ksnNoEditEnd('start')">
						<template #right>
							<image style="width: 32rpx;height: 32rpx;margin-left: 20rpx;" src="/static/home/home_scan_icon.png" mode="aspectFit" @tap="scanCode('start')"></image>
						</template>
					</xh-input>
					<xh-input placeholder="请输入" showTitle title="结束编号" v-model="formParams.endCode" @onBlur="ksnNoEditEnd('end')">
						<template #right>
							<image style="width: 32rpx;height: 32rpx;margin-left: 20rpx;" src="/static/home/home_scan_icon.png" mode="aspectFit" @tap="scanCode('end')"></image>
						</template>
					</xh-input>
				</view>
			</template>
			<!-- 机具列表 -->
			<view class="select-device-list">
				<view class="select-device-list-item" v-for="item in dataList" :key="item.id" @tap="didSelectItem(item)">
					<image src="/static/home/device_list_icon.png" mode="aspectFit"></image>
					<view class="select-device-item-content">
						<text>{{item.name}}-{{item.deviceTypeCode}}({{item.deviceNetworkType}})</text>
						<text>{{item.ksnNo}}</text>
					</view>
					<image :src="item.isSelect ? '/static/login/checkboxsel@2x.png' : '/static/login/checkboxnol@2x.png'" mode="aspectFit"></image>
				</view>
			</view>
			<xh-empty minHeight="50vh" :show="dataList.length == 0"></xh-empty>
		</z-paging>
		
		<view class="submit-btn select-device-bottom" @tap="submit">确认</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue'
	import { getCanTransferDevList } from '@/common/api/api.js'
	const props = defineProps(['type', 'agentId', 'policyId'])
	const menuList = ref([{ name: `普通${props.type}`, type: 0 }, { name: `批量${props.type}`, type: 1 }])
	const pagingRef = ref(null)
	const selectType = ref(0)
	const formParams = ref({
		// 开始编号
		startCode: '',
		// 结束编号
		endCode: ''
	})
	const dataList = ref([])
	// 已选择的机具数量
	const selectedCount = computed(()=>{
		const res = dataList.value.filter(item=>item.isSelect)
		return res.length
	})
	// 选择划拨/回拨类型
	const didSelectMenuItem = (item) => {
		selectType.value = item.type
		dataList.value = []
		if(item.type == 0) {
			queryList()
		}
	}
	// 选择机具
	const didSelectItem = (item)=>{
		item.isSelect = !item.isSelect
	}
	// 输入框编辑结束
	const ksnNoEditEnd = (type)=>{
		console.log(type)
		if(!uni.$uv.test.empty(formParams.value.startCode) && !uni.$uv.test.empty(formParams.value.endCode)){
			queryList()
		}
	}
	// 扫描
	const scanCode = (type) => {
		uni.scanCode({
			// #ifdef APP-PLUS
			autoDecodeCharSet: true,
			//#endif
			success(res) {
				if (type == 'start') {
					// 开始编号扫描
					formParams.value.startCode = res.result
				} else {
					// 结束编号扫描
					formParams.value.endCode = res.result
				}
				queryList()
			}
		})
	}
	// 确认选择
	const submit = ()=>{
		const res = dataList.value.filter(item=>item.isSelect)
		if(res.length == 0){
			uni.$utils.showToast('请选择机具')
			return
		}
		uni.$emit('selectDevice',res)
		uni.navigateBack()
	}
	// 获取列表数据
	const queryList = async () => {
		if(selectType.value == 1) {
			if(uni.$uv.test.empty(formParams.value.startCode)){
				uni.$utils.showToast('请输入开始编号')
				pagingRef.value.complete()
				return
			}
			if(uni.$uv.test.empty(formParams.value.endCode)){
				uni.$utils.showToast('请输入结束编号')
				pagingRef.value.complete()
				return
			}
		}
		let params = {}
		if (props.agentId) {
			params.agentId = props.agentId
		}
		if (props.policyId) {
			params.policyId = props.policyId
		}
		params.allotType = props.type == '划拨' ? '1' : '2'
		if(selectType.value == 1) {
			params.ksnNoStart = formParams.value.startCode
			params.ksnNoEnd = formParams.value.endCode
		}
		const res = await getCanTransferDevList(params)
		dataList.value = res.result
		dataList.value.forEach(item=>{
			item.isSelect = false
		})
		pagingRef.value.complete()
	}
	onLoad(()=>{
		queryList()
	})
</script>

<style lang="scss" scoped>
	.select-device-layout {
		.menu-box {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
		}

		.select-device-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
		}

		.select-device-filter {
			margin-bottom: 20rpx;
		}

		.select-device-list {
			padding: 0 30rpx;
			padding-bottom: calc(var(--window-bottom) + 130rpx);
			.select-device-list-item {
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				image:nth-of-type(1) {
					width: 80rpx;
					height: 80rpx;
				}

				image:nth-of-type(2) {
					width: 24rpx;
					height: 24rpx;
					margin-left: auto;
				}

				.select-device-item-content {
					display: flex;
					flex-direction: column;
					font-size: 26rpx;

					text:nth-child(2) {
						margin-top: 10rpx;
					}
				}
			}
		}

		.select-device-bottom {
			position: fixed;
			bottom: calc(var(--window-bottom) + 30rpx);
			left: 0;
			right: 0;
		}
	}
</style>